import React from 'react';
import { Card, Button, Spin } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import downloadFile from '@/utils/utils';

const { Description } = DescriptionList;
@connect(({ issueprove, loading }) => ({
  issueprove,
  loading: loading.models.issueprove,
}))
class issueProveDetail extends React.Component {
  state = {};

  componentDidMount() {
    const { location } = this.props;
    const { id } = location.query;
    this.detail(id);
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const opermars = {
      exprsAffix: undefined,
      emlAffix: undefined,
      affix: undefined,
      proveSerHdlId: undefined,
      empName: undefined,
      certTypeName: undefined,
      certNo: undefined,
      custName: undefined,
      areaName: undefined,
      entryStatusName: undefined,
      proveTypeName: undefined,
      tskSourceName: undefined,
      hdlWayName: undefined,
      recEml: undefined,
      stateName: undefined,
      operName: undefined,
      operTime: undefined,
      remark: undefined,
      exprsAddr: undefined,
      exprsNo: undefined,
      exprsCorpName: undefined,
      hdlFlagName: undefined,
      hdlName: undefined,
      hdlCertTypeName: undefined,
      hdlFlag: undefined,
      hdlCertNo: undefined,
    };

    dispatch({
      type: 'issueprove/updateModelData',
      payload: opermars,
    });
  }

  detail = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'issueprove/fetchDetail',
      payload: { proveSerHdlId: id },
    });
  };

  // 提交
  submitedit = () => {
    const { location } = this.props;
    const { id } = location.query;
    this.linkRoute(id, 'update');
  };

  linkRoute = (id, path) =>
    id ? router.push(`/hrmanage/issueproof/${path}?id=${id}`) : router.push(`/hrmanage/${path}`);

  // 返回
  submitback = () => {
    router.push('/hrmanage/issueproof/index');
  };

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: file[1] });
  };

  render() {
    const { issueprove, loading } = this.props;
    const affix = data =>
      data.map(item => (
        <p key={item.split('|')[0]} style={{ wordBreak: 'break-all' }}>
          <a onClick={() => this.downLoad(item)}>{item.split('|')[1]}</a>
        </p>
      ));
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading} size="large">
          <Card title={<span>基本信息</span>}>
            <DescriptionList style={{ marginBottom: 20 }}>
              <Description term="员工姓名">{issueprove.empName}</Description>
              <Description term="证件类型">{issueprove.certTypeName}</Description>
              <Description term="证件号">{issueprove.certNo}</Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 20 }}>
              <Description term="客户名称">{issueprove.custName}</Description>
              <Description term="地区">{issueprove.areaName}</Description>
              <Description term="在职状态">{issueprove.entryStatusName}</Description>
            </DescriptionList>
          </Card>
          <Card title={<span>证明内容</span>}>
            <DescriptionList style={{ marginBottom: 20 }}>
              <Description term="证明类型">{issueprove.proveTypeName}</Description>
              <Description term="任务来源">{issueprove.tskSourceName}</Description>
              <Description term="办理方式">{issueprove.hdlWayName || '--'}</Description>
            </DescriptionList>
            {Number(issueprove.hdlWay) === 1 ? (
              <div>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="收件者邮箱">{issueprove.recEml || '--'}</Description>
                  <Description term="状态">{issueprove.stateName}</Description>
                  <Description term="办理人">{issueprove.operName}</Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="操作时间">
                    {issueprove.operTime
                      ? moment(issueprove.operTime).format('YYYY-MM-DD HH:mm')
                      : '--'}
                  </Description>
                  <Description term="办理备注">{issueprove.remark || '--'}</Description>
                  <Description term="附件">
                    {issueprove.emlAffix && issueprove.emlAffix.length
                      ? affix(issueprove.emlAffix)
                      : '--'}
                  </Description>
                </DescriptionList>
              </div>
            ) : null}
            {Number(issueprove.hdlWay) === 3 ? (
              <div>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="邮寄地址">{issueprove.exprsAddr || '--'}</Description>
                  <Description term="快递单号">{issueprove.exprsNo || '--'}</Description>
                  <Description term="快递公司">{issueprove.exprsCorpName || '--'}</Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="状态">{issueprove.stateName}</Description>
                  <Description term="办理人">{issueprove.operName}</Description>
                  <Description term="操作时间">
                    {issueprove.operTime
                      ? moment(issueprove.operTime).format('YYYY-MM-DD HH:mm')
                      : '--'}
                  </Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="办理备注">{issueprove.remark || '--'}</Description>
                  <Description term="附件">
                    {issueprove.exprsAffix && issueprove.exprsAffix.length
                      ? affix(issueprove.exprsAffix)
                      : '--'}
                  </Description>
                </DescriptionList>
              </div>
            ) : null}
            {Number(issueprove.hdlWay) === 2 && Number(issueprove.hdlFlag) === 2 ? (
              <div>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="本人/代办">{issueprove.hdlFlagName || '--'}</Description>
                  {issueprove.hdlName ? (
                    <Description term="代办人姓名">{issueprove.hdlName}</Description>
                  ) : null}
                  {issueprove.hdlCertTypeName ? (
                    <Description term="代办人证件类型">
                      {issueprove.hdlCertTypeName || '--'}
                    </Description>
                  ) : null}
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 20 }}>
                  {issueprove.hdlCertNo ? (
                    <Description term="代办人证件号">{issueprove.hdlCertNo || '--'}</Description>
                  ) : null}
                  <Description term="状态">{issueprove.stateName}</Description>
                  <Description term="办理人">{issueprove.operName}</Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="操作时间">
                    {issueprove.operTime
                      ? moment(issueprove.operTime).format('YYYY-MM-DD HH:mm')
                      : '--'}
                  </Description>
                  <Description term="办理备注">{issueprove.remark || '--'}</Description>
                  <Description term="附件">
                    {issueprove.affix && issueprove.affix.length ? affix(issueprove.affix) : '--'}
                  </Description>
                </DescriptionList>
              </div>
            ) : null}
            {Number(issueprove.hdlWay) === 2 && Number(issueprove.hdlFlag) === 1 ? (
              <div>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="本人/代办">{issueprove.hdlFlagName || '--'}</Description>
                  <Description term="状态">{issueprove.stateName}</Description>
                  <Description term="办理人">{issueprove.operName}</Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 20 }}>
                  <Description term="操作时间">
                    {issueprove.operTime
                      ? moment(issueprove.operTime).format('YYYY-MM-DD HH:mm')
                      : '--'}
                  </Description>
                  <Description term="办理备注">{issueprove.remark || '--'}</Description>
                  <Description term="附件">
                    {issueprove.affix && issueprove.affix.length ? affix(issueprove.affix) : '--'}
                  </Description>
                </DescriptionList>
              </div>
            ) : null}
          </Card>
        </Spin>
        <FooterToolbar>
          <Button onClick={this.submitback}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default issueProveDetail;
